<template>
  <div
    class="operate-content"
    v-if="isShowOperateBar == true"
    style="z-index: 2001"
    @mousewheel.prevent
    @click="$store.commit('mutationIsShowOperateBar', false)"
  >
    <div
      class="operate-list"
      ref="operateList"
      v-if="isShowOperateBar"
      :style="{
        top: getterOperateBarContentLayerXY.y + 'px',
        left: getterOperateBarContentLayerXY.x + 'px',
      }"
      @click.stop
      @mousewheel.stop
    >
      <div
        class="row"
        v-for="(item, index) in list"
        :key="index"
        @click="todo(item)"
      >
        <i class="iconfont" :class="item.icon"></i>
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          type: "delete",
          icon: "icon-shanchu",
          text: "删除",
        },
      ],
    };
  },
  computed: {
    isShowOperateBar() {
      return this.$store.state.isShowOperateBar;
    },
    getterOperateBarContentLayerXY() {
      return this.$store.getters.getterOperateBarContentLayerXY;
    },
    currentBlockIndex() {
      return this.$store.state.currentBlockIndex;
    },
    currentPageBlocks() {
      return this.$store.state.currentPageBlocks;
    },
  },
  methods: {
    todo(item) {
      switch (item.type) {
        case "delete":
          this.currentPageBlocks.splice(this.currentBlockIndex, 1);
          this.$store.commit("mutationIsShowOperateBar", false);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less">
*::selection {
  background: rgba(45, 170, 219, 0.3);
}
.operate-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  .operate-list {
    box-sizing: border-box;
    z-index: 9999 !important;
    background: #ffffff;
    position: absolute;
    z-index: 2002;
    width: 200px;
    height: 200px;
    border: 1px solid #dcdfe6;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    border-radius: 4px;
    padding: 10px 0;
    &::-webkit-scrollbar {
      background: transparent;
    }
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background: #d3d1cb !important;
    }
    &::-webkit-scrollbar-track {
      background: #edece9 !important;
    }
    .row {
      height: 30px;
      padding: 0 10px;
      font-size: 15px;
      display: flex;
      align-items: center;
      i {
        margin-right: 10px;
      }
      &:hover {
        background-color: #eee;
      }
    }
  }
}
</style>